<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本列表</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">

        <!-- v-for遍历数组 -->
        <h2>{{name}}</h2>
        <ul>
            <!-- v-for的形参  p  可以直接插值语法 -->
            <!-- v-for必须添加索引值 key 它的值不一定必须p.id 也可以是index，只要保证每个都不同就行 -->
            <li v-for='(p,index) in persons' :key="p.id">{{p.name}}--{{p.age}}--{{index}}</li>
        </ul>

        <!-- v-for遍历对象 -->
        <ul>
            <li v-for="(value,k) in car" :key="k">{{value}}--{{k}}</li>
        </ul>

        <!-- v-for还可以遍历字符串 -->
        <ul>
            <li v-for="(char,index) in str" :key="index">{{char}}--{{index}}</li>
        </ul>

        <!-- v-for遍历指定次数  就是自然数计数-->
        <ul>
            <li v-for="(a,b) in 5">{{a}}--{{b}}</li>
        </ul>
    </div>
    <script>

        /* v - for用于展示列表数据
        语法： v -for= (item, index) in xxx : key = 'yyy'
        可遍历：数组，对象，字符串，指定次数 */

        Vue.config.productionTip = false
        var vm = new Vue({
            el: '#root',
            data: {
                name: 'xiaoyao',
                persons: [
                    { id: 1, name: '张三', age: 20 },
                    { id: 2, name: '李四', age: 30 },
                    { id: 3, name: '王五', age: 40 },
                ],
                car: {
                    name: '五菱',
                    price: 140000,
                    color: 'orange'
                },
                str: 'hello'
            },
            methods: {}
        });
    </script>
</body>

</html>